<form name="form" novalidate ng-submit="import(form)">
  <div class="modal-header">
    <h3>Import file</h3>
  </div>

  <div class="modal-body" ng-class="{'has-error': submittedType === mode.type && form.$invalid}">
    <div style="text-align: center; font-size: 2em; margin-bottom: 1em;" ng-show="importing">
      <i class="fa fa-spin fa-spinner"></i>
    </div>

    <div class="form-group" style="margin-bottom: 10px;">
      <div style="float: left; width: 130px;">
        <select class="form-control" ng-model="mode" ng-options="option.name for option in options"></select>
      </div>

      <div style="margin-left: 145px;" ng-switch="mode.type">
        <input id="swagger" name="swagger" type="url" ng-model="mode.value" class="form-control" required ng-switch-when="url" placeholder="http://petstore.swagger.io/v2/swagger.json">

        <input id="file" name="file" type="file" ng-model="mode.value" class="form-control" required ng-switch-when="file" onchange="angular.element(this).scope().handleFileSelect(this)">
      </div>
    </div>

    <div ng-if="submittedType === 'url'">
      <p class="help-block" ng-show="form.swagger.$error.required || form.swagger.$error.url">Please provide a valid URL.</p>
    </div>

    <div ng-if="submittedType === 'file'">
      <p class="help-block" ng-show="form.file.$error.required">Please select a file to import.</p>
    </div>

    <div ng-if="mode.type === 'file'">
      <p>If you want to upload multiple files, you can .zip them and import them in a single step.</p>
    </div>

    <div ng-if="mode.spec === 'OAS'">
      <p>Note: Currently supports OAS (Swagger) v2.0</p>
    </div>
  </div>

  <div class="modal-footer" style="margin-top: 0;">
    <button type="button" class="btn btn-default" ng-click="$dismiss()">Close</button>
    <button type="submit" class="btn btn-primary">Import</button>
  </div>
</form>
